Mermain live editor
✒️ 2025-05-16 09:05 내용 수정
자바 스크립트 기반의 다이어그램과 차트를 만드는 툴
- 홈페이지 : https://mermaid.live/
- 공식 문서 페이지 : https://mermaid.js.org/intro/
- 팀 미니 프로젝트를 진행할 때 발표 자료를 제작하던 중 코드 구조도를 만들 때 처음 알게 되었고, 매우 유용하게 사용했다.
- 아래 코드를 Mermaid live editor의 코드 작성 부분에 작성하면 아래 사진과 같은 도식이 그려진다.
- flowchart 다이어그램이다.
- 몇몇 옵션을 지정해서 그릴 때 HTML 형식을 사용했다. (HTML)
- HTML과 CSS를 배우기 전에 간단하게 만든거라서 배운 뒤에 다시 보니 중복되서 사용된 요소들도 많아 복잡하다.
flowchart TD
A[[<span style="color:orange;">메인 프레임</span>]] --> B[[<html><body style='text-align: center'>매장 이용 방법 화면<br><span style="color:orange;">takeOrEat</span></html>]]
B -->|<span style="color:cyan;">포장</span>| C[[<html><body style='text-align: center'>메뉴 선택 화면<br><span style="color:orange;">menuGUI</span></html>]]
B -->|<span style="color:cyan;">매장에서 식사</span>| C
C --> |<span style="color:cyan;">처음으로 돌아가기</span>| B
C --> |<span style="color:cyan;">분식, 일식, 한식, 양식</span>| D[[<html><body style='text-align: center'>카테고리별 메뉴판<br><span style="color:orange;">menu</span></html>]]
D --> |<span style="color:cyan;">+, -<br> 확인</span>| H([메뉴 추가하기])
C --> |<span style="color:cyan;">모두 제거<br>선택한 메뉴 제거</span>| E([메뉴 삭제하기])
E --> EI
H --> EI
EI([장바구니에 메뉴가 있을 때]) --> |<span style="color:cyan;">결제</span>| I[[<html><body style='text-align: center'>결제화면<br><span style="color:orange;">creditGUI</span></html>]]
I --> |<span style="color:cyan;">카드, 현금, 페이앱, 기프트카드/쿠폰</span>| J[[<html><body style='text-align: center'>결제 진행 화면<br><span style="color:orange;">creditMethod</span></html>]]
I --> |<span style="color:cyan;">뒤로 돌아가기</span>| C
J --> |<span style="color:yellow;"><html><body style='text-align: center'>3초 지연<br>결제 임의 구현</span></html>| K[[<html><body style='text-align: center'>결제 완료 화면<br><span style="color:orange;">orderEndGUI</span></html>]]
K --> |<span style="color:cyan;">처음으로 돌아가기</span><br><span style="color:yellow;">10초 뒤 자동으로 돌아가기</span>| B